<!doctype html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Web Starter Kit</title>

    <!-- Add to homescreen -->
    <link rel="manifest" href="manifest.json">

    <!-- Fallback to homescreen for Chrome <39 on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="application-name" content="Web Starter Kit">
    <link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png">

    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Web Starter Kit">
    <link rel="apple-touch-icon" href="images/touch/apple-touch-icon.png">

    <!-- Tile icon for Win8 (144x144 + tile color) -->
    <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
    <meta name="msapplication-TileColor" content="#3372DF">

    <meta name="theme-color" content="#3372DF">

    <!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
    <!--
    <link rel="canonical" href="http://www.example.com/">
    -->

    <!-- Page styles -->
    <link rel="stylesheet" href="components/font-awesome/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="styles/main.css">
    <script>
        var docHeight = document.documentElement.clientHeight,
            docWidth = document.documentElement.clientWidth,
            html = document.getElementsByTagName("html")[0];
        var rate = docWidth / 320;

        html.style.fontSize = 100 * rate + "px";
    </script>
</head>
<body>
<nav>
    <div class="navbar">
        <div class="navbar-inner">
            <div class="logo">
                <img src="images/5u-logo.png" alt=""/>
            </div>
        </div>
    </div>
</nav>
<div class="view">
    <div class="tab-block-btn-group">
        <a class="btn active" href="javascript:;" data-tab-target="1">热点</a>
        <a class="btn" href="javascript:;" data-tab-target="2">关注</a>
    </div>
    <ul class="list" data-tab-index="1">
        <li>
            <div class="author-info">
                <div class="author-thumb">
                    <img src="images/demo/002.png" alt="#"/>
                </div>
                <div class="author-desc">
                    <div class="name">我的名字奶人我</div>
                    <p>
                        <span class="time">3分钟前</span><span>来自</span><span>梅西球迷会</span>
                    </p>
                </div>
            </div>
            <div class="article">
                <div class="article-title">
                    <h3 class="article-badge ding">恒大的高拉特和鲁能的问题一样?</h3>
                </div>
                <div class="article-images">
                    <a href="#"><img src="images/demo/001.png" alt="#"/></a>
                    <a href="#"><img src="images/demo/001.png" alt="#"/></a>
                    <a href="#"><img src="images/demo/001.png" alt="#"/></a>
                </div>
            </div>
            <div class="experience-badge"><i class="fa fa-star"></i>+5</div>
        </li>
        <li>
            <div class="author-info">
                <div class="author-thumb">
                    <img src="images/demo/002.png" alt="#"/>
                </div>
                <div class="author-desc">
                    <div class="name">我的名字奶人我</div>
                    <p><span class="time">3分钟前</span><span>来自</span><span>梅西球迷会</span></p>
                </div>
            </div>
            <div class="article">
                <div class="article-title">
                    <h3 class="article-badge jing">恒大的高拉特和鲁能的问题一样?</h3>
                </div>
                <div class="article-images">
                    <a href="#"><img src="images/demo/001.png" alt="#"/></a>
                    <a href="#"><img src="images/demo/001.png" alt="#"/></a>
                    <a href="#"><img src="images/demo/001.png" alt="#"/></a>
                </div>
            </div>
        </li>
        <li>
            <div class="author-info">
                <div class="author-thumb">
                    <img src="images/demo/002.png" alt="#"/>
                </div>
                <div class="author-desc">
                    <div class="name">我的名字奶人我</div>
                    <p><span class="time">3分钟前</span><span>来自</span><span>梅西球迷会</span></p>
                </div>
            </div>
            <div class="article">
                <div class="article-title">
                    <h3>恒大的高拉特和鲁能的问题一样?</h3>
                </div>
                <div class="article-images">
                    <a href="#"><img src="images/demo/001.png" alt="#"/></a>
                    <a href="#"><img src="images/demo/001.png" alt="#"/></a>
                    <a href="#"><img src="images/demo/001.png" alt="#"/></a>
                </div>
            </div>
        </li>
    </ul>
    <ul class="list" data-tab-index="2" style="display: none;">
        <li>
            <div class="author-info">
                <div class="author-thumb">
                    <img src="images/demo/002.png" alt="#"/>
                </div>
                <div class="author-desc">
                    <div class="name">我的名字奶人我</div>
                    <p><span class="time">3分钟前</span><span>来自</span><span>梅西球迷会</span></p>
                </div>
            </div>
            <div class="article">
                <div class="article-title">
                    <h3 class="article-badge ding">恒大的高拉特和鲁能的问题一样?</h3>
                </div>
                <div class="article-images">
                    <a href="#"><img src="images/demo/001.png" alt="#"/></a>
                    <a href="#"><img src="images/demo/001.png" alt="#"/></a>
                    <a href="#"><img src="images/demo/001.png" alt="#"/></a>
                </div>
            </div>
            <div class="badge"><i class="fa fa-star"></i>+5</div>
        </li>
    </ul>
    <div class="load-more-block">加载更多</div>
</div>
<div class="toolbar">
    <a href="#" class="item active square"><i class="fa fa-home" style="margin-right: 4px;"></i>广场</a>

    <div class="item search"><i class="fa fa-search"></i></div>
    <a href="#" class="item person"><i class="fa fa-user" style="margin-right: 4px;"></i>个人</a>
</div>

<script src="components/zepto/zepto.js"></script>
<script src="components/fastclick/lib/fastclick.js"></script>
<script src="components/hammerjs/hammer.js"></script>
<script>
    Zepto(function ($) {
        FastClick.attach(document.body);

        // tab事件
        $(".tab-block-btn-group .btn").each(function () {
            var me = $(this);
            me.on("click", function () {
                if (!me.hasClass("active")) {
                    me.siblings(".active").removeClass("active");
                    me.addClass("active");

                    $("[data-tab-index]").hide();
                    $("[data-tab-index='" + me.attr("data-tab-target") + "']").show();
                }
            });
        });

        // load more事件
        $(".load-more-block").on("click", function () {

        });
    });
</script>
</body>
</html>
